import {
  ObjectOnlyPushSet,
  removeObjectOnlyPushSet,
} from '../../../../../Func/uniFunc/Func/ObjectOnlyPushSet_operate';
import { toStringTypeCheck } from '../../../../../Func/uniFunc/Func/toStringTypeCheck';

const listenCssVar_manaTag = 'listenCssVar_mana';

class listenCssVar_mana {
  get [Symbol.toStringTag]() {
    return listenCssVar_manaTag;
  }

  /**
   * 管理 当前元素 的 cssvar
   * @param {HTMLElement} element
   */
  constructor(element) {
    this.targetEl = element;
  }

  /**
   * @type {HTMLElement}
   */
  targetEl;

  data = [];

  setCssVar(cssVar, val) {
    if (!onlyCssVar(cssVar)) {
      return;
    }

    if (!ObjectOnlyPushSet(this, cssVar, val)) {
      this[cssVar] = val;
    }

    assembleStyle(this);
  }

  getCssVar(cssVar) {
    if (this.data.indexOf(cssVar) > -1) {
      //   console.log(`${cssVar}: ${a[cssVar]}`);
      return this[cssVar];
    }
  }

  removeCssVar(cssVar) {
    removeObjectOnlyPushSet(this, cssVar);
    this.targetEl.style = ignoreCssVar(this.targetEl, cssVar);
  }
}

/**
 * 装载 热更新 信息
 * @param {listenCssVar_mana} that
 */
function assembleStyle(that) {
  let styleStr = '';
  // a 中信息 为 热样式
  for (let i = 0; i < that.data.length; i++) {
    if (that[that.data[i]] != undefined) {
      styleStr += `${that.data[i]}: ${that[that.data[i]]};`;
    }
  }
  /**
   * 原始样式 冷样式
   */
  styleStr += asyncInlineStyle(that.targetEl, that.data);
  // console.log(styleStr);
  that.targetEl.style = styleStr;
}

/**
 * 解析 当前 元素的 内嵌样式  卸载元素标签上的 style
 * @param {Element} element 当前元素
 * @param {[]} data
 */
function asyncInlineStyle(element, data) {
  // let stackcss = element.style.cssText;
  // console.log(stackcss);

  // let stackArr;
  // // let val;
  // for (let i = 0; i < element.style.length; i++) {
  //   if (onlyCssVar(element.style[i])) {
  //     // val = regXcssVarValue(element.style[i]).exec(element.style.cssText);
  //     // if (val != undefined) {
  //     //   val = val['groups']['cssvarValue'];
  //     // }
  //     // 删除 相关 冷 cssvar 变量
  //     if (data.indexOf(element.style[i]) > -1) {
  //       let matchStr = stackcss.match(regXcssVarValue(element.style[i]));
  //       //   console.log(matchStr, regXcssVarValue(element.style[i]));
  //       stackArr = stackcss.split('');
  //       stackArr.splice(matchStr.index, matchStr[0].length);
  //       stackcss = stackArr.join('');

  //       //   console.log(stackcss);
  //     }
  //     // setCssVar(element.style[i], val);
  //   }
  //   //   else {
  //   //   }
  // }

  return ignoreCssVar(element, data);
}

/**
 *
 * @param {HTMLElement} element
 * @param {[] | string[]} CssVarArr -- 开头的 cssVar  css 变量
 * @returns
 */
function ignoreCssVar(element, CssVarArr) {
  let stackcss = element.style.cssText;

  if (toStringTypeCheck(CssVarArr, 'string')) {
    CssVarArr = [CssVarArr];
  }
  // console.log(stackcss);

  let stackArr;
  // let val;
  for (let i = 0; i < element.style.length; i++) {
    if (onlyCssVar(element.style[i])) {
      // 删除 相关
      if (CssVarArr.includes(element.style[i])) {
        let matchStr = stackcss.match(regXcssVarValue(element.style[i]));
        //   console.log(matchStr, regXcssVarValue(element.style[i]));
        stackArr = stackcss.split('');
        stackArr.splice(matchStr.index, matchStr[0].length);
        stackcss = stackArr.join('');

        //   console.log(stackcss);
      }
    }
  }
  return stackcss;
}

function onlyCssVar(prop) {
  // console.log('看看用到我 检测没');
  if (prop[0] == '-' && prop[1] == '-') {
    return true;
  }
  return false;
}

/**
 * 监听 目标元素的 css var 变量
 * @param {Element} element target Element 目标元素
 * @returns
 */
function regXcssVarValue(prifix) {
  return RegExp(`${prifix}: (?<cssvarValue>.*?);`);
}

export { listenCssVar_mana };
